<template>
  <div>
    <div class="my-nav">
      <van-tabs v-model="active" @click="onClick">
        <van-tab title="已启用" />
        <van-tab title="已停用" />
      </van-tabs>
      <van-search
        v-model="search"
        placeholder="请输入从业人员姓名/编号"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <div class="page_space">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <base-card
          v-for="(item, index) in list"
          :key="index"
          class="mt-15"
          :title="item.title"
          :data="item.data"
          arrow
          @click="goto('/person-details?id=' + item.id)"
        />
      </van-list>
    </div>

    <div class="btn_wrap">
      <button
        class="btn middle default"
        @click="goto('/manage-person?enabled=' + params.enabled)"
      >
        管理
      </button>
      <button class="btn middle" @click="goto('/add-person')">添加</button>
    </div>
  </div>
</template>

<script>
import baseCard from '@/components/base-card'
import { getPerson } from '@/api/person'
export default {
  name: 'personInfo',
  components: { baseCard },
  data() {
    return {
      loading: false,
      finished: false, // 触底加载结束
      params: {
        limit: 10,
        page: 1,
        enabled: true,
        keyWords: ''
      },
      active: 0,
      search: '',
      list: []
    }
  },
  created() {},
  methods: {
    onSearch(val) {
      this.search = val.trim()
      this.params.keyWords = this.search
      this.getList(this.params, true)
    },
    onCancel() {
      this.search = ''
      this.params.keyWords = ''
      this.getList(this.params, true)
    },
    onClick(name, title) {
      if (title === '已启用') {
        this.params.enabled = true
      } else {
        this.params.enabled = false
      }
      this.list = []
      this.params.page = 1
      this.getList(this.params)
    },
    // 触底加载
    onLoad() {
      this.getList(this.params)
    },
    // 选择采样人员
    async getList(params, isReset) {
      if (isReset) {
        this.loading = true
        this.finished = false
        this.list = []
        this.params.page = 1
      }
      const res = await getPerson(params)
      if (res.code === '0') {
        res.data.content.forEach((item) => {
          this.list.push({
            title: item.name,
            id: item.id,
            data: [
              {
                key: '所属区划',
                value: item.allAreaName
              },
              {
                key: '人员编号',
                value: item.code
              }
            ]
          })
        })
        // 加载状态结束
        this.loading = false
        this.params.page++
        // 数据全部加载完成
        if (res.data.last) {
          this.finished = true
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.my-nav {
  position: sticky;
  top: 0;
  z-index: 999;
}
</style>
